<template>
	<view>
		<view class="detail">
			<view class="goods-box">
				<view class="shop-name">{{detail.shop_info.shopname}}</view>
				<view class="list" v-for="(item,index) in detail.goods_list">
					<image :src="item.image" mode="aspectFill"></image>
					<view class="goods-detail">
						<view class="goods-head">
							<view class="goods-name">{{item.name}}</view>
							<view class="goods-money"><text>￥</text>{{item.goods_total_price}}</view>
						</view>
						<view class="goods-num">X{{item.number}}</view>
					</view>
				</view>
				<view class="lists">
					<view class="t-name">优惠券</view>
					<view class="red" @click="showCoupon">
						<view>{{names!='0.00'?'已选择，￥'+names+'优惠券':'未选红包，请选择优惠券'}}</view>
						<image :src="common.appUrl.oss+common.imgList.sc15" mode="widthFix"></image>
					</view>
				</view>
				<view class="foot-names">已优惠<text class="t1">￥{{names}}</text> 小计 ￥<text
						class="t2">{{actual_payment}}</text>
				</view>
			</view>
		</view>
		<view class="whites">
			<view class="pu">
				<view class="pu-title">购超级优惠券，本单立享优惠</view>
				<!-- <view class="pu-con">
					<view style="color:#999999">查看全部</view>
					<image :src="common.appUrl.oss+common.imgList.sc3" mode="widthFix" class="next-img"></image>
				</view> -->
			</view>
			<scroll-view class="scroll-view_H" scroll-x="true">
				<view class="scroll-view-item_H" v-for="(item,index) in detail.groupcoupon">
					<view :class="item.id==bid?'co-up border':'co-up'">
						<!-- <image :src="common.appUrl.oss+common.imgList.sc16" mode=""></image> -->
						<view class="juti">
							<view class="ti1">全平台商家通用</view>
							<view class="ti2">{{item.price}}<text class="ts1">元</text> <text class="ts2">x</text>
								{{item.num}}<text class="ts1">张</text>
							</view>
							<view class="ti3">无门槛</view>
							<view class="ti4">全平台通用</view>
						</view>
					</view>
					<view class="co-down">
						<view class="co-money">￥{{item.vip_price}}<text>￥{{item.market_price}}</text></view>
						<view class="co-qg" @click="buying(item)">抢购</view>
					</view>
				</view>
			</scroll-view>
		</view>
		<view class="null"></view>
		<view class="foots">
			<view class="f-lcon">
				<view class="up">合计￥{{actual_payment}}</view>
				<view class="down">已优惠<text>￥{{names}}</text></view>
			</view>
			<view class="f-rcon" @click="success">提交订单</view>
		</view>
		<view class="black" v-if="alert">
			<view class="white-cons">
				<view class="title-name">选择收货地址</view>
				<image :src="common.appUrl.oss+common.imgList.sc20" mode="widthFix" class="close-img" @click="show">
				</image>
				<view class="p-list" v-for="(item,index) in addressList" @click.stop="choose(item)">
					<view class="lcons">
						<image
							:src="aid==item.id?common.appUrl.oss+common.imgList.sc17:common.appUrl.oss+common.imgList.sc18"
							mode="widthFix" class="s-img">
						</image>
						<view class="p-con">
							<view class="p-name">{{item.formatted_address}}{{item.address_name}}</view>
							<view class="p-num">{{item.name}} {{item.mobile}}</view>
						</view>
					</view>
					<image :src="common.appUrl.oss+common.imgList.sc19" mode="widthFix" class="edit-img"
						@click.stop="addAddress"></image>
				</view>
				<view class="foot-box">
					<view class="ok" @click="addAddress">添加新地址</view>
				</view>
			</view>
		</view>
		<view class="black" v-if="time">
			<view class="white-cons">
				<view class="title-name">选择送达时间</view>
				<image :src="common.appUrl.oss+common.imgList.sc20" mode="widthFix" class="close-img" @click="puhide">
				</image>
				<view class="scroll-box">
					<scroll-view scroll-y="true" class="scroll-l">
						<view :class="timestate==index?'s-names-ok':'s-names'" v-for="(item,index) in timeList"
							@click="stab(index)">{{item.date}}</view>
					</scroll-view>
					<scroll-view scroll-y="true" class="scroll-r">
						<view class="more-lists" v-for="(item,index) in list" @click="shide(item.time)">
							<view :class="simg==item.time?'scolors':''">{{item.time}}
								<!-- <text
									:class="simg==item.time?'scolors':''">{{item.peisong}}元配送费</text> -->
							</view>
							<image :src="common.appUrl.oss+common.imgList.sc17" mode="widthFix" v-if="simg==item.time">
						</view>
					</scroll-view>
				</view>
			</view>
		</view>
		<view class="black" v-if="couponType">
			<view class="white-cons">
				<view class="title-name">选择优惠券</view>
				<image :src="common.appUrl.oss+common.imgList.sc20" mode="widthFix" class="close-img"
					@click="hideCoupon">
				</image>
				<view class="scroll-boxs">
					<view class="box" v-for="(item,index) in couponList">
						<view class="details">
							<view class="lcon">
								<view class="money"><text>￥</text>{{item.price}}</view>
								<view class="name" v-if="item.limit==0">无门槛</view>
								<view class="name" v-else>满{{item.limit}}减{{item.price}}</view>
							</view>
							<view class="rcon">
								<view class="title">{{item.name}}</view>
								<view class="time">到期:{{item.enddate}}</view>
							</view>
						</view>
						<view class="use" @click="item.id==cid?'':useCoupon(item)">{{item.id==cid?'已选择':'立即使用'}}</view>
					</view>
				</view>
				<view class="foot-box">
					<view class="ok" @click="noUse">不使用优惠券</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		mapState,
	} from 'vuex';
	export default {
		computed: {
			...mapState(['common'])
		},
		data() {
			return {
				tabNum: 1,
				array: [],
				index: -1,
				headHeight: 0,
				alert: false,
				num: 0,
				time: false,
				couponType: false,
				timestate: 0,
				simg: '尽快',
				app: getApp().globalData,
				id: '',
				aid: '',
				addressList: [],
				detail: {},
				address: {},
				timeList: [],
				list: [],
				couponList: [],
				times: '',
				pay_price: '0.00',
				new_pay_price: '0.00',
				actual_payment: '0.00',
				cid: 0,
				bid: 0,
				names: '0.00',
				phone: '',
				remarks: '',
				coupon_type: 0,
				vipState: 0
			}
		},
		onLoad(e) {
			this.headHeight = (uni.getSystemInfoSync().statusBarHeight + 45) * 2
			this.id = e.id
			this.getComment();
			this.getTime();
		},
		onShow() {
			this.getAddressList()
			this.remarks = uni.getStorageSync('remarks')
			this.app.post('/api/chef/user/info').then(res => {
				console.log(res)
				this.vipState = res.is_vip
			})
		},
		methods: {
			choose(item) {
				this.aid = item.id
				this.alert = false
				this.getComment()
			},
			getMoney() {
				this.app.post('/api/order/payinfo', {
					order_sn: this.detail.order_sn,
					coupon_id: this.cid,
					coupon_type: this.coupon_type,
					groupcoupon_id: this.bid,
				}).then(res => {
					console.log(res)
					this.actual_payment = res.actual_payment
				})
			},
			goBack() {
				uni.navigateBack({
					delta: 1
				})
			},
			buying(item) {
				console.log(item)
				if (this.vipState == 0) {
					uni.showToast({
						title: '请先开通会员',
						icon: "none"
					})
					return
				}
				if (this.bid == item.id) {
					this.bid = ''
				} else {
					this.bid = item.id
				}
				this.new_pay_price = parseFloat(this.pay_price) + parseFloat(item.vip_price);
				this.getCoupon()
				this.getMoney()
			},
			noUse() {
				this.cid = ""
				this.coupon_type = 0
				this.names = "0.00"
				this.pay_price = parseFloat(this.pay_price) + parseFloat(this.names);
				this.couponType = false
				this.getMoney()
			},
			useCoupon(item) {
				this.cid = item.id
				this.names = item.price
				this.coupon_type = item.coupon_type
				this.pay_price = parseFloat(this.pay_price) - parseFloat(item.price);
				this.couponType = false
				this.getMoney()
			},
			showCoupon() {
				this.couponType = true
			},
			hideCoupon() {
				this.couponType = false
			},
			getComment() {
				this.app.post('/api/order/confirm_order', {
					shop_id: this.id,
					address_id: this.aid,
					time: this.times,
					delivery_type: 'pickup',
					lat: uni.getStorageSync('latitude'),
					lng: uni.getStorageSync('longitude'),
				}).then(res => {
					console.log(res)
					this.aid = res.address.id
					this.detail = res
					this.address = res.address
					this.pay_price = res.pay_price
					this.new_pay_price = res.pay_price
					this.array = res.tableware_num
					this.getCoupon()
					this.getMoney()
				})
			},
			getAddressList() {
				this.app.post('/api/wanlshop/address/getaddress').then(res => {
					console.log(res)
					this.addressList = res.data
				})
			},
			getTime() {
				this.app.post('/api/order/shop_time', {
					shop_id: this.id,
					address_id: this.aid,
					delivery_type: this.tabNum == 1 ? 'express' : 'pickup',
				}).then(res => {
					console.log(res)
					this.timeList = res
					this.list = res[0].times
					this.times = res[0].times[0].time
					this.getComment()
				})
			},
			getCoupon() {
				this.app.post('/api/order/user_coupon', {
					price: this.detail.total_price,
					groupcoupon_id: this.bid,
					shop_id: this.id
				}).then(res => {
					console.log(res)
					this.couponList = res
				})
			},
			tab(num) {
				this.tabNum = num
				this.getComment()
			},
			stab(num) {
				this.timestate = num
				this.list = this.timeList[num].times
			},
			notes() {
				uni.navigateTo({
					url: '/pages/sc/notes/notes'
				})
			},
			addAddress(type, item) {
				uni.navigateTo({
					url: '/pages/user/address/address'
				})
			},
			selectCoupon() {
				uni.navigateTo({
					url: '/pages/sc/selectCoupon/selectCoupon'
				})
			},
			success() {
				if (this.tabNum == 2 && !this.phone) {
					uni.showToast({
						title: '请填写手机号',
						icon: "none"
					})
					return
				}
				this.app.post('/api/order/pay_order', {
					order_sn: this.detail.order_sn,
					delivery_type: 'pickup',
					address_id: this.address.id,
					time: this.times,
					coupon_id: this.cid,
					coupon_type: this.coupon_type,
					groupcoupon_id: this.bid,
					remarks: this.remarks,
					tableware_num: this.array[this.index],
					phone: this.phone,
				}).then(res => {
					console.log(res)
					uni.requestPayment({
						appId: res.pay_param.appId,
						nonceStr: res.pay_param.nonceStr,
						package: res.pay_param.package,
						paySign: res.pay_param.paySign,
						signType: res.pay_param.signType,
						timeStamp: res.pay_param.timeStamp,
						success: (e) => {
							uni.removeStorageSync('remarks')
							uni.navigateTo({
								url: '/pages/sc/success/success'
							})
						},
						fail: (e) => {
							uni.showToast({
								title: '取消支付',
								icon: "none"
							})
							setTimeout(() => {
								uni.switchTab({
									url: '/pages/lcMy/lcMy'
								})
							}, 1500)
						}
					})
				})
			},
			bindPickerChange: function(e) {
				console.log('picker发送选择改变，携带值为', e.detail.value)
				this.index = e.detail.value
			},
			show() {
				this.alert = !this.alert
			},
			shide(time) {
				this.simg = time
				this.time = false
				this.times = time
			},
			puhide() {
				this.time = false
			},
			showtime() {
				this.time = true
			}
		}
	}
</script>

<style lang="scss">
	.head-cons {
		width: 750rpx;
		position: fixed;
		z-index: 9999;
		top: 0;

		.head-boxs {
			width: 750rpx;
			height: 100rpx;
			position: absolute;
			bottom: 0;
			display: flex;
			align-items: center;

			image {
				width: 34rpx;
				height: 34rpx;
				margin-left: 20rpx;
			}

			view {
				width: 80%;
				text-align: center;
				color: #FFFFFF;
				position: absolute;
				left: 10%;
			}
		}
	}

	.bgcolor {
		width: 750rpx;
		height: 629rpx;
		background: linear-gradient(180deg, #84BD00 0%, rgba(140, 47, 82, 0.6704) 32%, rgba(140, 47, 82, 0) 100%);
		position: fixed;
		top: 0;
	}

	.detail {
		width: 690rpx;
		margin-left: 30rpx;
		position: relative;

		.head-de {
			width: 690rpx;
			height: 84rpx;
			background-color: #FFFFFF;
			border-radius: 16rpx;
			display: flex;
			align-items: center;

			image {
				width: 30rpx;
				height: 30rpx;
				margin-left: 30rpx;
			}

			view {
				font-size: 24rpx;
				color: #DD7329;
				margin-left: 20rpx;
			}
		}

		.twos {
			width: 690rpx;
			margin-top: 30rpx;
		}

		.tab-head {
			width: 690rpx;
			position: relative;

			image {
				width: 690rpx;
			}

			.outer {
				width: 690rpx;
				height: 87rpx;
				position: absolute;
				top: 0;
				display: flex;

				.outer-two {
					width: 50%;
					display: flex;
					justify-content: center;
					align-content: center;
					flex-wrap: wrap;

					.tab-name {
						width: 100%;
						text-align: center;
						font-size: 34rpx;
						color: #666666;
					}

					.select-tab-name {
						width: 100%;
						text-align: center;
						font-size: 34rpx;
						color: #333333;
					}

					.tab-line {
						width: 50rpx;
						height: 6rpx;
						background-color: #3D3D3D;
						opacity: 0;
						border-radius: 20rpx;
						margin-top: 20rpx;
					}

					.select-tab-line {
						width: 50rpx;
						height: 6rpx;
						background-color: #25AC71;
						border-radius: 20rpx;
						margin-top: 20rpx;
					}
				}
			}
		}

		.white {
			width: 690rpx;
			background: #FFFFFF;
			border-radius: 0 0 16rpx 16rpx;
			padding: 30rpx 0;
			margin-top: -10rpx;

			.woo {
				width: 630rpx;
				margin-left: 30rpx;
				display: flex;
				align-items: center;
				justify-content: space-between;

				.add-con {
					width: 600rpx;

					.address {
						font-size: 30rpx;
						color: #333333;
					}

					.user {
						font-size: 26rpx;
						color: #999999;
						margin-top: 10rpx;
					}
				}

				.next-img {
					width: 20rpx;
					height: 20rpx;
				}
			}

			.pu {
				width: 630rpx;
				margin-left: 30rpx;
				display: flex;
				align-items: center;
				justify-content: space-between;
				margin-top: 30rpx;

				.pu-title {
					font-size: 26rpx;
					color: #333333;
				}

				.pu-con {
					display: flex;
					align-items: center;

					input {
						text-align: right;
						font-size: 26rpx;
						color: #84BD00;
					}

					view {
						font-size: 26rpx;
						color: #84BD00;
					}

					image {
						width: 20rpx;
						height: 20rpx;
						margin-left: 10rpx;
					}
				}
			}
		}

		.goods-box {
			width: 690rpx;
			background-color: #FFFFFF;
			border-radius: 16rpx;
			margin-top: 30rpx;

			.shop-name {
				font-size: 26rpx;
				color: #333333;
				margin-left: 30rpx;
				padding: 30rpx 0;
			}

			.list {
				width: 630rpx;
				margin-left: 30rpx;
				display: flex;
				align-items: center;
				margin-bottom: 30rpx;

				image {
					width: 120rpx;
					height: 120rpx;
				}

				.goods-detail {
					width: 484rpx;
					height: 120rpx;
					display: flex;
					align-content: space-between;
					flex-wrap: wrap;
					margin-left: 26rpx;

					.goods-head {
						width: 100%;
						display: flex;
						align-items: center;
						justify-content: space-between;

						.goods-name {
							font-size: 26rpx;
							color: #333333;
						}

						.goods-money {
							font-size: 36rpx;
							color: #333333;

							text {
								font-size: 26rpx;
							}
						}
					}

					.goods-sku {
						width: 100%;
						font-size: 26rpx;
						color: #999999;
					}

					.goods-num {
						font-size: 32rpx;
						color: #999999;
					}
				}
			}

			.lists {
				width: 630rpx;
				display: flex;
				justify-content: space-between;
				align-items: center;
				margin-left: 30rpx;
				margin-bottom: 30rpx;

				.t-name {
					font-size: 26rpx;
					color: #333333;
				}

				.moneys {
					font-size: 36rpx;
					color: #333333;

					text {
						font-size: 26rpx;
					}
				}

				.red {
					background: #FF0000;
					border-radius: 50rpx;
					display: flex;
					align-items: center;
					padding: 8rpx 20rpx;

					view {
						font-size: 22rpx;
						color: #FFFFFF;
					}

					image {
						width: 20rpx;
						height: 20rpx;
						// margin-top: 6rpx;
					}
				}
			}

			.foot-names {
				border-top: 1px solid #D8D8D8;
				width: 630rpx;
				margin-left: 30rpx;
				text-align: right;
				line-height: 102rpx;
				font-size: 30rpx;

				.t1 {
					color: #FF0000;
					margin-right: 20rpx;
				}
			}
		}

	}

	.whites {
		width: 690rpx;
		background-color: #FFFFFF;
		border-radius: 16rpx;
		margin-left: 30rpx;
		padding: 30rpx 0;
		margin-top: 30rpx;

		.scroll-view_H {
			white-space: nowrap;
			width: 660rpx;
			margin-left: 30rpx;
			margin-top: 30rpx;

			.scroll-view-item_H {
				display: inline-block;
				width: 248rpx;
				margin-right: 30rpx;

				.border {
					border: 2px solid #9B5114 !important;
					border-radius: 20rpx;
					box-sizing: border-box;
				}

				.co-up {
					width: 248rpx;
					height: 178rpx;
					position: relative;
					box-sizing: border-box;
					border: 2px solid #fff;

					image {
						width: 248rpx;
						height: 170rpx;
					}

					.juti {
						position: absolute;
						width: 100%;
						height: 170rpx;
						left: 0;
						display: flex;
						flex-wrap: wrap;
						justify-content: center;
						top: 0;
						background-color: #FEF7E5;
						border-radius: 20rpx;
						overflow: hidden;

						.ti1 {
							width: 180rpx;
							text-align: center;
							font-size: 20rpx;
							color: #9B5114;
							line-height: 30rpx;
							background-color: #FEE3AE;
						}

						.ti2 {
							width: 100%;
							text-align: center;
							font-size: 36rpx;
							color: #9B5114;

							.ts1 {
								font-size: 22rpx;
							}

							.ts2 {
								font-size: 22rpx;
								color: #CCAD8E;
							}
						}

						.ti3 {
							width: 100%;
							text-align: center;
							font-size: 20rpx;
							color: #9B5114;
						}

						.ti4 {
							width: 100%;
							text-align: center;
							font-size: 24rpx;
							color: #9B5114;
							line-height: 54rpx;
							background-color: #FEE3AE;
						}
					}
				}

				.co-down {
					width: 100%;
					display: flex;
					justify-content: space-between;
					align-items: center;
					margin-top: 16rpx;

					.co-money {
						color: #9B5114;
						font-size: 30rpx;

						text {
							color: #999999;
							font-size: 24rpx;
							margin-left: 10rpx;
							text-decoration: line-through;
						}
					}

					.co-qg {
						width: 83rpx;
						height: 42rpx;
						border-radius: 50rpx;
						display: flex;
						justify-content: center;
						align-items: center;
						color: #FFFFFF;
						font-size: 24rpx;
						background: linear-gradient(270deg, #DB7C3B 0%, #E69850 100%);
					}

					.co-qgs {
						width: 83rpx;
						height: 42rpx;
						border-radius: 50rpx;
						display: flex;
						justify-content: center;
						align-items: center;
						color: #FFFFFF;
						font-size: 24rpx;
						background: #9E9E9E;
					}
				}
			}
		}

		.pu {
			width: 630rpx;
			margin-left: 30rpx;
			display: flex;
			align-items: center;
			justify-content: space-between;

			.pu-title {
				font-size: 26rpx;
				color: #333333;
			}

			.pu-con {
				display: flex;
				align-items: center;


				view {
					font-size: 26rpx;
					color: #333333;
				}

				image {
					width: 20rpx;
					height: 20rpx;
					margin-left: 10rpx;
				}
			}
		}
	}

	.foots {
		width: 750rpx;
		height: 120rpx;
		background: #FFFFFF;
		position: fixed;
		bottom: 0;
		display: flex;
		justify-content: space-between;
		align-items: center;

		.f-lcon {
			margin-left: 30rpx;

			.up {}

			.down {
				font-size: 24rpx;
				color: #999999;

				text {
					color: #FF0000;
				}
			}
		}

		.f-rcon {
			width: 268rpx;
			height: 80rpx;
			border-radius: 10rpx;
			background: #84BD00;
			display: flex;
			justify-content: center;
			align-items: center;
			color: #FFFFFF;
			font-size: 30rpx;
			margin-right: 30rpx;
		}
	}

	.null {
		width: 750rpx;
		height: 150rpx;
	}

	.black {
		width: 750rpx;
		height: 100%;
		position: fixed;
		bottom: 0;
		left: 0;
		background-color: rgba(0, 0, 0, 0.6);

		.white-cons {
			width: 750rpx;
			background-color: #FFFFFF;
			border-radius: 30rpx 30rpx 0 0;
			position: fixed;
			bottom: 0;
			padding-top: 50rpx;

			.scroll-boxs {
				width: 750rpx;
				display: flex;
				flex-wrap: wrap;
				padding-bottom: 30rpx;
				max-height: 500rpx;
				overflow: auto;

				.box {
					width: 690rpx;
					height: 188rpx;
					border-radius: 16rpx;
					margin-left: 30rpx;
					margin-top: 30rpx;
					background-color: #FFFFFF;
					display: flex;
					align-items: center;
					justify-content: space-between;
					box-shadow: 0px 0px 16px 0px rgba(0, 0, 0, 0.07);

					.details {
						display: flex;
						align-items: center;

						.lcon {
							width: 188rpx;
							text-align: center;
							margin-top: -20rpx;

							.money {
								font-size: 52rpx;
								color: #84BD00;

								text {
									font-size: 30rpx;
								}
							}

							.name {
								font-size: 24rpx;
								color: #9E9E9E;
							}
						}

						.title {
							font-size: 30rpx;
							color: #333333;
						}

						.time {
							font-size: 24rpx;
							color: #999999;
							margin-top: 10rpx;
						}
					}

					.use {
						width: 140rpx;
						height: 60rpx;
						border-radius: 50rpx;
						background-color: #84BD00;
						font-size: 26rpx;
						color: #FFFFFF;
						display: flex;
						align-items: center;
						justify-content: center;
						margin-right: 30rpx;
					}
				}
			}

			.scroll-box {
				width: 750rpx;
				display: flex;



				.scroll-l {
					width: 244rpx;
					height: 700rpx;
					background-color: #EEFCEB;

					.s-names {
						width: 244rpx;
						height: 122rpx;
						display: flex;
						align-items: center;
						justify-content: center;
						font-size: 30rpx;
						color: #666666;
					}

					.s-names-ok {
						width: 244rpx;
						height: 122rpx;
						display: flex;
						align-items: center;
						justify-content: center;
						font-size: 30rpx;
						color: #84BD00;
						background-color: #FFFFFF;
					}
				}

				.scroll-r {
					width: 446rpx;
					height: 700rpx;
					margin-left: 30rpx;

					.more-lists {
						width: 446rpx;
						height: 120rpx;
						display: flex;
						align-items: center;
						justify-content: space-between;
						border-bottom: 1px solid #D8D8D8;

						view {
							color: #333333;
							font-size: 30rpx;

							text {
								font-size: 24rpx;
								color: #999999;
								margin-left: 20rpx;
							}
						}

						.scolors {
							color: #84BD00 !important;
						}

						image {
							width: 40rpx;
							height: 40rpx;
						}
					}
				}
			}

			.title-name {
				width: 100%;
				text-align: center;
				font-size: 34rpx;
				color: #333333;
			}

			.close-img {
				width: 40rpx;
				height: 40rpx;
				position: absolute;
				right: 40rpx;
				top: 50rpx;
			}

			.p-list {
				width: 690rpx;
				display: flex;
				align-items: center;
				justify-content: space-between;
				border-bottom: 1px solid #D8D8D8;
				margin-left: 30rpx;
				padding: 40rpx 0;

				.lcons {
					display: flex;
					align-items: center;

					.s-img {
						width: 40rpx;
						height: 40rpx;
					}

					.p-con {
						margin-left: 30rpx;

						.p-name {
							font-size: 30rpx;
							color: #3D3D3D;
						}

						.p-num {
							margin-top: 10rpx;
							font-size: 26rpx;
							color: #999999;
						}
					}
				}

				.edit-img {
					width: 40rpx;
					height: 40rpx;
				}
			}

			.foot-box {
				width: 690rpx;
				margin-left: 30rpx;
				display: flex;
				justify-content: space-between;
				padding: 40rpx 0;

				.add {
					width: 322rpx;
					height: 80rpx;
					border-radius: 10rpx;
					background: rgba(37, 172, 113, 0.1);
					display: flex;
					justify-content: center;
					align-items: center;
					color: #25AC71;
				}

				.ok {
					width: 690rpx;
					height: 80rpx;
					border-radius: 10rpx;
					background: #84BD00;
					display: flex;
					justify-content: center;
					align-items: center;
					color: #FFFFFF;
				}
			}
		}
	}
</style>